<template>
  <div class="chart-container">
    <!-- <div id="app">
      <div class="box">
        <div class="children-box"></div>
      </div>
    </div> -->

    <!-- <div id="vue">
      <div style="width: 200px;height: 200px;background: red;" @click="tap0">
        <button type="button" class="mui-btn mui-btn-blue" @click.prevent="tap1">按钮</button>
      </div>
    </div> -->

    <button @click="restDataFm">点击</button>

  </div>
</template>

<script>
export default {
  name: "demoTwenty1",
  filters: {},
  data() {
    return {
        form:{
          name:"xiaoming",
          age:"18"
        }
    };
  },
  created() {},
  mounted() {
     this.judge()
     //this.unqineArray()
    // this.mergeAll()

  },
  methods: {

    //  tap0(){
    //         console.log('00000')
    //  },
    //  tap1(){
    //         console.log("1111")
    //  },

    mergeAll(){
        // let obj1 = {a:1}
        // let obj2 = {b:2}
        // let aa={...obj1,...obj2}
        // console.log(aa)

      //   let bb={
      //     name:"111",
      //     array:[1,2],
      //     hobby:{
      //       name:"lanqiu"
      //     }
      //   }
      //   let cc={
      //     age:"22"
      //   }
      //   // let dd={...bb,...cc}
        
      //  let  dd= Object.assign({},bb,cc);

      //   console.log(dd)

      //  var test = {
      //   name: 'a',
      //   date: [new Date(1536627600000), new Date(1540047600000)],
      // };

      // let b;
      // b = JSON.parse(JSON.stringify(test))

    },

    restDataFm(){
          this.form={
            name:"xiaohong",
            age:"19"
        }
         Object.assign(this.$data.form, this.$options.data().form)
         console.log(this.form.name)
    },


     unqineArray(){
         const setOne = new Set([1, 2, 3, 4, 4]); //[...set] // ==> [1, 2, 3, 4]
          var arr = [1,2,3,4,5,'1','2',3,3,'1'];
          arr = Array.from(new Set(arr));
          console.log(arr);
          console.log(setOne)
     },
     judge(){
          var a = "iamstring.";
          var b = 222;
          var c= [1,2,3];
          var d = new Date();
          var e = function(){alert(111);};
          var f = function(){this.name="22";};　
          var g=true　
          var hh={
            name:"小明"
          }

           //console.log(typeof null)  //object
           //console.log(typeof undefined)  //undefined

          // console.log(typeof a)  //string
          // console.log(typeof b)  //number
           //console.log(typeof c)   //object
           //console.log(typeof hh)  //undefined
          // console.log(typeof d)  //object
          // console.log(typeof e)  //function
          // console.log(typeof f)  //function
          // console.log(typeof g)  // 
          // console.log(hh instanceof Object)// true
          // console.log(c instanceof Array)// true
          // console.log(d instanceof Date)
          // console.log(f instanceof Function) // true
           //console.log(f instanceof function)  // false

          // console.log(Object.prototype.toString.call(a) === "[object String]") // true;
          // console.log(Object.prototype.toString.call(b) === "[object Number]") // true;
          // console.log(Object.prototype.toString.call(c) === "[object Array]") // true;
          // console.log(Object.prototype.toString.call(d) === "[object Date]") // true;
          // console.log(Object.prototype.toString.call(e) === "[object Function]") // true;
          // console.log(Object.prototype.toString.call(f) === "[object Function]") //true;

     },



    /*
    最常见的判断方法：typeof
    判断已知对象类型的方法： instanceof
    根据对象的constructor判断： constructor
    Object.prototype.toString.call(e)

    数组去重 [...newSet(test)];   Array.from()

    Object.assign()
    key的作用主要是为了高效的更新虚拟DOM

    */
  }
};
</script>

<style >
/*
    定宽高 
    1.绝对定位和负magin值
    2.绝对定位 + transform
    3.flex布局

     不定宽高 
      1.绝对定位 + transform
      2.flex布局

*/
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}

/* .box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px; 
}
 */

</style>
